@charset "utf-8";
/***********************************************************
	Filename: szphp.css
	Note	: 首页CSS样式
	Version : szphp v2.0.0
	Author  : 优尚设计 <547829810@qq.com>
	Web		: www.szphp.cn
	Update  : 2022.10.31
***********************************************************/

/* .bigpoto{position:relative;background-position:center;background-size:cover;background-repeat:repeat}
.bigpoto .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(65deg,hsl(0deg 0% 100% / 50%) 20%,hsl(0deg 0% 100% / 80%) 90%)} */
/* 标题简介 */

/* banner******************************************************************************/
#banner,.swiper-container{position:relative;width:100%;height:550px;transition:all .5s ease 0s}
#banner .swiper-slide{background-position:50%;background-size:cover}
#banner .swiper-button-next,#banner .swiper-button-prev{top:45%;z-index:100;background:url(none);opacity:.5;transition:all .3s ease 0s}
#banner .swiper-button-next{right:15px}
#banner .swiper-button-prev{left:15px}
#banner:hover .swiper-button-next,#banner:hover .swiper-button-prev{opacity:1}
#banner:hover .swiper-button-next{right:35px}
#banner:hover .swiper-button-prev{left:35px}
#banner .next,#banner .prev{width:50px;height:50px;outline:0;border-radius:50%;background:#fff;color:#333;text-align:center;line-height:50px;-webkit-tap-highlight-color:transparent}
#banner .next:after{content:"\f054";font-size:1.5rem;font-family:FontAwesome}
#banner .prev:after{content:"\f053";font-size:1.5rem;font-family:FontAwesome}
#banner .next:hover,#banner .prev:hover{background:#003279;color:#fff}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:15px}
#banner .swiper-pagination-bullet{width:15px;height:8px;border-radius:10px;background:rgba(255,255,255,.5);vertical-align:middle;opacity:1;transition:all .5s ease 0s}
#banner .swiper-pagination-bullet-active{width:35px;background:#ffffff}
/* 遮罩效果 */
#banner .overlay{top:0;left:0;z-index:99;width:100%;height:100%;background-image:linear-gradient(65deg,hsl(208deg 83% 49% / 80%) 30%,hsl(0deg 0% 0% / 0%) 60%)}
/* 文字内容 */
#banner .swiper-slide .title{position:absolute;top:0;left:0;z-index:100;height:100%;color:#333;text-shadow:none}
#banner .swiper-slide .title .row{height:100%}
#banner .swiper-slide .title .content{display:flex;height:auto;justify-content:center;align-items:left;flex-direction:column}
#banner .swiper-slide .title .content .box{display:inline-block;padding:25px;width:50%;height:auto;border-radius:8px;background-color:rgba(255,255,255,.7);z-index: 99;}
#banner .swiper-slide .title h2{text-align:left;font-weight:normal;line-height:3rem}
#banner .swiper-slide .title p{margin-top:1rem;margin-bottom:.5rem;text-align:left;line-height:1.6}
#banner .swiper-slide .title .more{display:block;margin-top:1rem;width:140px;height:45px;background:#003279;text-align:center;font-size:.9rem;line-height:45px;color:#fff;transition:all .3s ease 0s;border-radius: 3px;}
#banner .swiper-slide .title .more .fa{margin-left:5px;color:#fff;font-size:.9rem;transition:all .5s ease 0s}
#banner .swiper-slide .title .more:hover{background:#8ec31f}
#banner .swiper-slide .title .more:hover .fa{margin-left:10px}

@media screen and (max-width:1024px){
    #banner,.swiper-container{height:500px}
    #banner .swiper-slide .title h2{width:80%}
    #banner .swiper-slide .title p{width:80%}
}
@media screen and (max-width:960px){
    #banner .next,#banner .prev{display:none}
}
@media screen and (max-width:820px){
    #banner,.swiper-container{height:450px}
    #banner .swiper-slide .title .content .box{width:100%;}
    #banner .swiper-slide .title h2{font-size:1.5rem;line-height:2rem}
    #banner .swiper-slide .title p{font-size:.8rem}
}
@media screen and (max-width:576px){
    #banner,.swiper-container{height:250px}
    #banner .swiper-slide .title h2{width:100%;font-weight:600;font-size:1.2rem}
    #banner .swiper-slide .title p{margin-top:0;width:100%;line-height:1.3}
    #banner .swiper-slide .title .more{display:none;margin:.5rem 0;width:100px;height:35px;font-size:.7rem;line-height:35px}
    .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:3px}
    #banner .swiper-pagination-bullet{width:10px;height:5px;border-radius:5px}
    #banner .swiper-pagination-bullet-active{width:18px}
}

/*indexcata*/
.indexcata{margin-bottom:1rem;padding-bottom:1rem;text-align:center}
.indexcata h2{color:#003279;font-weight: 300;}
.indexcata p{margin:1rem 0 .5rem;color:#666;text-transform:capitalize}
.indexcata .line{display:block;margin:0 auto;width:80px;height:2px;background:#003279}

/*product*/
.product{padding-top:50px;padding-bottom:50px;background-color:#fafafa}
.product .category{margin-top:1rem;margin-bottom:3rem;text-align:center}
.product .category a{display:inline-block;padding:0 1.5rem;height:45px;border-radius:3px;background:#fff;text-align:center;font-weight:700;line-height:45px}
.product .category .current,.product .category a:hover{background:#003279;color:#fff}
.product ul{padding:0}
.product li{margin-bottom:30px;list-style:none}
.product li a{position:relative;display:block;display:table-cell;padding:10px 10px 25px;border:1px solid rgba(0,0,0,.1);border-radius:2px;background:#e0eaf9;transition:all .3s ease 0s}
.product li img{width:100%}
.product li .title{display:block;padding:1rem 0 0;text-align:center;font-weight:600}
@media screen and (max-width:768px){
    .product .category a{padding:0 1rem;margin-bottom:1rem}
}
@media screen and (max-width:576px){
    .product .category{margin-top:0;margin-bottom:1rem;text-align:left}
    .product .category a{margin-bottom:.5rem;padding:0 .8rem;height:35px;font-weight:normal;font-size:.8rem;line-height:35px}
    .product ul{margin-right:-5px;margin-left:-5px}
    .product li{padding-right:5px;padding-left:5px}
    .product li .title{padding:.5rem;min-height: 50px;}
}

/*superiority*/
.superiority{padding-top:50px;padding-bottom:50px}
.superiority ul{padding:0}
.superiority li{margin-bottom:2rem;list-style:none;text-align:center}
.superiority li span{display:block}
.superiority li .icon{position:relative;margin:0 auto;width:140px;height:140px;border-radius:50%;background:#edf5dc;line-height:170px;transition:all .3s ease 0s}
.superiority li .icon .fa{font-size: 3.5rem;color:#003279;}
.superiority li .icon img{position:absolute;top:50%;left:50%;width:60%;opacity:1;transform:translate(-50%,-50%)}
.superiority li .title{font-weight:700;font-size:1.2rem;line-height:4rem;transition:all .5s ease 0s}
.superiority li .note{padding:0 25px}
.superiority li p{color:#999;font-size:.95rem}
.superiority li:hover .icon{background:#003279}
.superiority li:hover .icon .fa{color:#fff;}
@media screen and (max-width:576px){
    .superiority li .icon{width:120px;height:120px;line-height:150px}
    .superiority li .icon .fa{font-size: 3rem}
    .superiority li .title{font-size:1rem;line-height:3rem}
    .superiority li .note{padding:0 10px}
    .superiority li p{font-size:.8rem}
}

/*about*/
.about{padding-top:50px;padding-bottom:50px}
.about img{width:100%;border-radius:8px}
.about a{display:block;padding:0 15px;width:120px;height:40px;border-radius:2px;background:#003279;color:#fff;text-align:center;font-size:.95rem;line-height:40px;transition:all .5s ease 0s}
.about a:hover{background:#003279}
@media screen and (max-width:768px){
    .about h2{margin-top:2rem}
}
@media screen and (max-width:576px){
    .about{padding-top:30px;padding-bottom:50px}
    .about h2{text-align:center}
    .about a{margin:0 auto}
}

/*news*/
.news{padding-top:50px;padding-bottom:50px}
/*center*/
.news .left{margin:0;padding:0 0 25px 0;height:auto;border-radius:5px;background:#fafafa;transition:all .3s ease 0s;style:none}
.news .left:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.07)}
.news .left img{border-radius:5px 5px 0 0}
.news .left p{margin-bottom:1rem;padding-right:25px;padding-left:25px}
.news .left .title{margin-top:1.5rem;color:#333;font-weight:700;font-size:.95rem;transition:all .3s ease 0s}
.news .left .note{display:-webkit-box;overflow:hidden;height:60px;color:#888;text-overflow:ellipsis;font-size:.95rem;line-height:1.3rem;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.news .left .attach{margin-top:1.5rem;margin-right:25px;margin-left:25px;padding-top:1.5rem;border-top:1px solid #eaeaea}
.news .left .attach span{display:inline-block;width:50%;line-height:1.5rem}
.news .left .attach .time{color:rgba(0,0,0,.6);font-size:.85rem}
.news .left:hover .title{color:#222}
.news .left:hover .attach .more{color:#f36}
.news .left:hover .attach .more .fa{margin-left:10px}
/*right*/
.news .right{margin:0;padding:0;list-style:none;transition:all .3s ease 0s}
.news .right li{position:relative;margin-bottom:15px;padding:15px 25px 15px 120px;border-radius:5px;background:#fafafa;transition:all .3s ease 0s}
.news .right li:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.07)}
.news .right p{margin-bottom:.5rem}
.news .right .title{color:#333;font-weight:700;font-size:.95rem;transition:all .3s ease 0s}
.news .right .note{display:-webkit-box;overflow:hidden;height:40px;color:#888;text-overflow:ellipsis;font-size:.95rem;line-height:1.3rem;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news .right .time{position:absolute;top:10px;left:20px;width:80px;height:80px;border-radius:5px;background:#8ec31f;transition:all .3s ease 0s}
.news .right .time span{display:block;text-align:center;letter-spacing:0}
.news .right .time .day{margin-top:.5rem;color:#fff;font-weight:700;font-size:2rem}
.news .right .time .year{color:#fff;font-weight:normal;font-size:.8rem}
.news .right li:hover .title{color:#003279}
.news .right li:hover .time{background:#003279}
@media screen and (max-width:768px){
    .news .left{margin-bottom:15px;padding-bottom:2rem;height:auto}
    .news .left .title{font-size:.9rem}
    .news .left .note{font-size:.8rem}
    }
@media screen and (max-width:576px){
    .news .left p{padding-right:15px;padding-left:15px}
    .news .left .attach{margin-right:15px;margin-left:15px}
    .news .right li{padding:15px 15px 15px 80px}
    .news .right .title{font-size:.9rem}
    .news .right .note{font-size:.8rem}
    .news .right .time{top:20px;left:10px;width:60px;height:60px}
    .news .right .time .day{margin-top:0;font-size:1.5rem}
    .news .right .time .year{font-size:.75rem}
    }